<template>
  <el-container>
    <el-header>
      <el-row>
        <el-col :span="4">
          <div>公司logo</div>
        </el-col>
        <el-col :span="16">
          <h2>电商后台管理系统</h2>
        </el-col>
        <el-col :span="4">
          <el-button type="info" @click="loginOut">登出</el-button>
        </el-col>

      </el-row>


    </el-header>
    <el-container>
      <el-aside width="200px">
        <!-- menu -->
        <el-menu router unique-opened active-text-color="#ffd04b" background-color="#333744" class="el-menu-vertical-demo"
          :default-active="route.path" text-color="#fff">
          <el-sub-menu :index="item.id + ''" v-for="(item, index) in menuList" :key="item.id">
            <template #title>
              <el-icon>
                <svg-icon :name="iconObj[index]" color="#fff"></svg-icon>
              </el-icon>
              <span>{{ item.authName }}</span>
            </template>

            <el-menu-item :index="'/' + item2.path" v-for="item2 in item.children" :key="item2.id">
              <el-icon>
                <Menu />
              </el-icon>
              <span>{{ item2.authName }}</span>
            </el-menu-item>

          </el-sub-menu>
        </el-menu>
      </el-aside>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue';
import { useRouter, useRoute } from 'vue-router'
import { getMenuListApi } from '@/http/api'

interface menuItem {
  authName: string;
  id: number;
  order: number;
  path: string;
  children: menuItem[]
}


const router = useRouter();
const route = useRoute()

type iconType = {
  //索引签名
  [i: number]: string;
}

const iconObj: iconType = reactive({
  0: 'userok',
  1: 'rights',
  2: 'goods',
  3: 'order',
  4: 'report',
})

//定义菜单数组
const menuList = ref<menuItem[]>([])

//进入页面调用接口
onMounted(() => {
  //调用菜单方法
  getMenuList()
})

const getMenuList = async () => {
  //调用菜单api
  const res = await getMenuListApi()
  console.log('成功返回菜单：', res)
  menuList.value = res.data;
}

//退出
const loginOut = () => {
  localStorage.removeItem('token')
  router.replace({ path: '/login' })
}
</script>

<style scoped lang="scss">
.el-header {
  background: #373d41;
}

.el-aside {
  background: #333744;
}

.el-container {
  height: 100%;
}

.el-header {
  color: #fff
}

.el-row {
  .el-col {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>